import React,{useState,useEffect} from 'react'
import "./Homeitem.less"
import Img from "@/static/images/home/subject.png"
import LinearProgress from '@mui/material/LinearProgress';
import Button from '@mui/material/Button';
import { useNavigate } from 'react-router-dom';
interface Iprops{
  data:IExam
}

export default function Homeitem({data}:Iprops) {
  // console.log(data);
  const navigate = useNavigate()
  const func = (m:number,n:number):number=>{
    return Math.ceil(Math.random()*(n-m+1))+(m-1)
    
    
  }

  let aa = func(0,data.itemCount)
  // useEffect(()=>{
    // setaa(func(0,data.itemCount))
  // },[])
  
  

  
  
  return (
    
    <div className='homeitem'>
      <div className='left'>
        <img src={Img} alt="" />
      </div>
      <div className='center'>
        <div>{data.title}</div>
        <div>{aa}/{data.itemCount}</div>
        <LinearProgress className='jin' variant="determinate" value={aa/data.itemCount*100} />
      </div>
      <div className='right'>
        <Button variant="contained" onClick={()=>{
          console.log(data.actionCode)
          navigate(`/select/${data.actionCode}`)}} className="btn1">练习</Button>
      </div>
    </div>
  )
}
